<template>
  <div class="app-container">
    <div class="content-container">
      <!-- 左侧就诊记录列表 -->
      <div class="left-panel">
        <div class="visit-records">
          <div v-for="(record, index) in visitRecords" :key="index" 
               class="record-item" 
               :class="{ active: selectedRecord === record }"
               @click="selectRecord(record)">
            <div class="record-header">
              <div class="record-info">
                <!-- <span class="record-id">门诊编号：{{ record.id }}</span> -->
                <span class="record-time">{{ record.time }}</span>
              </div>
              <div class="record-dot" :class="{ active: selectedRecord === record }"></div>
            </div>
            <div class="record-content">
              <div class="record-row">
                <span class="label">接诊科室：</span>
                <span>{{ record.department }}</span>
              </div>
              <div class="record-row">
                <span class="label">接诊医生：</span>
                <span>{{ record.doctor }}</span>
              </div>
              <div class="record-row">
                <span class="label">诊断：</span>
                <span>{{ record.diagnosis }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧详细信息 -->
      <div class="right-panel" v-if="selectedRecord">
        <!-- 体格信息 -->
        <div class="info-section">
          <div class="section-title">
            <span class="title-text">体格信息</span>
            <!-- <div class="action-buttons">
              <el-button type="primary" size="small" @click="editHistory">编辑病历</el-button>
              <el-button type="primary" size="small" @click="printHistory">打印病历</el-button>
            </div> -->
          </div>
          <div class="info-grid">
            <div class="info-item">
              <span class="label">体温：</span>
              <span>{{ selectedRecord.physicalInfo.temperature }}℃</span>
            </div>
            <div class="info-item">
              <span class="label">呼吸：</span>
              <span>{{ selectedRecord.physicalInfo.breathing }}次/分</span>
            </div>
            <div class="info-item">
              <span class="label">脉搏：</span>
              <span>{{ selectedRecord.physicalInfo.pulse }}次/分</span>
            </div>
            <div class="info-item">
              <span class="label">血压：</span>
              <span>{{ selectedRecord.physicalInfo.bloodPressure }}mmhg</span>
            </div>
            <div class="info-item">
              <span class="label">血糖：</span>
              <span>{{ selectedRecord.physicalInfo.bloodSugar }}mmol/L</span>
            </div>
            <div class="info-item">
              <span class="label">血脂：</span>
              <span>{{ selectedRecord.physicalInfo.bloodFat }}mmol/L</span>
            </div>
            <div class="info-item">
              <span class="label">身高：</span>
              <span>{{ selectedRecord.physicalInfo.height }}cm</span>
            </div>
            <div class="info-item">
              <span class="label">体重：</span>
              <span>{{ selectedRecord.physicalInfo.weight }}kg</span>
            </div>
          </div>
        </div>

        <!-- 病历信息 -->
        <div class="info-section">
          <div class="section-title">
            <span class="title-text">病历信息</span>
          </div>
          <div class="medical-info">
            <div class="info-row">
              <span class="label">发病日期：</span>
              <span>{{ selectedRecord.medicalInfo.onsetDate }}</span>
            </div>
            <div class="info-row">
              <span class="label">主诉：</span>
              <span>{{ selectedRecord.medicalInfo.mainComplaint }}</span>
            </div>
            <div class="info-row">
              <span class="label">现病史：</span>
              <span>{{ selectedRecord.medicalInfo.presentIllness }}</span>
            </div>
            <div class="info-row">
              <span class="label">既往史：</span>
              <span>{{ selectedRecord.medicalInfo.pastHistory }}</span>
            </div>
            <div class="info-row">
              <span class="label">过敏史：</span>
              <span>{{ selectedRecord.medicalInfo.allergyHistory }}</span>
            </div>
            <div class="info-row">
              <span class="label">个人史：</span>
              <span>{{ selectedRecord.medicalInfo.personalHistory }}</span>
            </div>
            <div class="info-row">
              <span class="label">家族史：</span>
              <span>{{ selectedRecord.medicalInfo.familyHistory }}</span>
            </div>
            <div class="info-row">
              <span class="label">辅助检查：</span>
              <span>{{ selectedRecord.medicalInfo.auxiliaryExam }}</span>
            </div>
            <div class="info-row">
              <span class="label">治疗意见：</span>
              <span>{{ selectedRecord.medicalInfo.treatmentAdvice }}</span>
            </div>
            <div class="info-row">
              <span class="label">备注：</span>
              <span>{{ selectedRecord.medicalInfo.remarks }}</span>
            </div>
          </div>
        </div>

        <!-- 处方信息 -->
        <div class="info-section">
          <div class="section-title">
            <span class="title-text">处方信息</span>
          </div>
          <div class="prescription-info">
            <div class="prescription-list">
              <div v-for="(prescription, index) in selectedRecord.prescriptions" :key="index" class="prescription-item">
                <div class="prescription-header">
                  <span class="prescription-number">{{ index + 1 }}</span>
                  <span class="prescription-name">{{ prescription.name }}</span>
                  <!-- <span class="prescription-spec">{{ prescription.specification }}</span> -->
                </div>
                <div class="prescription-details">
                  <!-- <span>用法：{{ prescription.usage }}</span> -->
                  <!-- <span>用量：{{ prescription.dosage }}</span> -->
                  <span>频次：{{ prescription.frequency }}</span>
                  <!-- <span>天数：{{ prescription.days }}天</span> -->
                  <!-- <span>数量：{{ prescription.quantity }}{{ prescription.unit }}</span> -->
                  <span>数量：{{ prescription.quantity }}</span>
                  <span>规格：{{ prescription.drug_specification }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="PatientInfo">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { onMounted } from 'vue'
import { listUser } from "@/api/system/user";
import { listDept } from "@/api/system/dept";
import { getPatient } from "@/api/chy/patient";
import { getPrescription } from "@/api/patientInfo/patientInfo";



//工作台 路由传递过来的数据
const route = useRoute();
// const f = route.query.data
const rowData = JSON.parse(route.query.data);
// console.log('路由参数:', rowData);
// console.log(rowData.patientId);

//当前医生信息
const user = ref({})
//当前医生部门信息
const dept = ref({})

//医生信息
const userList = ref([]);
// 患者信息
const patient = ref({});
//部门列表
const deptList = ref([]);

onMounted(() => {
  //查询所有信息
  getPrescriptionByPatientId(rowData.patientId);
  //查询患者信息
  // getPatientById();
  
  // getDoctorById(); 
})

//根据患者id查询处方信息
async function getPrescriptionByPatientId(patientId) {
  try {
    const response = await getPrescription(patientId); // 等待异步操作完成
    // console.log(response.data); // 打印响应数据
    //将数据赋值给visitRecords
    visitRecords.value = response.data;
    // console.log(visitRecords.value); // 打印响应数据
  }catch (error) {
    console.error('Error fetching prescription:', error); 
  } 
}

// 获取医生信息
async function getDoctorById() {
  try {
    // 调用异步方法并等待结果  这里查询全部不在单写
    const res = await listUser();

    // 更新数据
    userList.value = res.rows;

    // 打印更新后的 userList 数据
    // console.log(userList.value);
  } catch (error) {
    console.error('Error fetching user list:', error);
  }
  // console.log(userList.value);
  userList.value.forEach(item => {
    if (item.userId === rowData.doctorId) {
      user.value = item;
    }
  });
  console.log(user.value);
  // console.log(user.value.deptId);
  getDeptList();
}


//查询部门信息
async function getDeptList() {
  try {

    const response = await listDept(); // 等待异步操作完成
    deptList.value = response.data;

  } catch (error) {
    console.error('Error fetching department list:', error);
  }
  // console.log(deptList.value); // 数据加载完成后打印
  // console.log(user.value);
  deptList.value.forEach(item => {
    // console.log(item.deptId);
    // console.log(item.deptId == user.value.deptId);
    if (item.deptId == user.value.deptId) {
      // console.log(item);
      dept.value = item;
    }
  })
  console.log(dept.value);
}
//查询患者信息
function getPatientById() {
  getPatient(rowData.patientId).then(response => {
    patient.value = response.data;
    console.log(patient.value);
    

    // console.log(patient.value.sex);
    // console.log(medicalForm.gender);
    //查询处方信息
    // getPrescriptionByPatientId(patient.value.id);
  });

}


// 模拟就诊记录数据
const visitRecords = ref([
  {
    // id: '201852639633',
    time: '2019-11-20 10:22:23',
    department: '全科',
    doctor: '王医生',
    diagnosis: '流行性感冒',
    physicalInfo: {
      temperature: '38',
      breathing: '25',
      pulse: '30',
      bloodPressure: '90-120',
      bloodSugar: '45',
      bloodFat: '67',
      height: '165',
      weight: '55'
    },
    medicalInfo: {
      onsetDate: '2019-11-10',
      mainComplaint: '头疼、发烧、头晕',
      presentIllness: '2周前有发烧症状',
      pastHistory: '既往有高血压糖尿病5年',
      allergyHistory: '否认',
      personalHistory: '有疫苗接种',
      familyHistory: '家族中无遗传病史。',
      auxiliaryExam: 'WBC:8.3,RBC4.5:HB; PR (+++)。GLU15.3。',
      treatmentAdvice: '1.控制高血压。2.控制高血糖（建议应用胰岛素）3.保护肾脏功能4.对症处理。',
      remarks: '无'
    },
    prescriptions: [
      {
        name: '抗骨增生片',
        specification: '0.5mg',
        usage: '口服',
        dosage: '1片',
        frequency: '每日两次',
        days: 2,
        quantity: 4,
        unit: '片'
      },
      {
        name: '兰索拉唑肠溶片',
        specification: '15mg',
        usage: '口服',
        dosage: '1片',
        frequency: '每日两次',
        days: 2,
        quantity: 4,
        unit: '片',
        //规格
        drug_specification:'',
      },
      {
        name: '复方氨酚烷胺片',
        specification: '10g',
        usage: '口服',
        dosage: '1片',
        frequency: '每日两次',
        days: 2,
        quantity: 4,
        unit: '片'
      }
    ]
  },


  {
    id: '201852639634',
    time: '2019-11-25 09:15:30',
    department: '内科',
    doctor: '李医生',
    diagnosis: '高血压',
    physicalInfo: {
      temperature: '36.5',
      breathing: '20',
      pulse: '85',
      bloodPressure: '140-90',
      bloodSugar: '6.2',
      bloodFat: '5.8',
      height: '170',
      weight: '65'
    },
    medicalInfo: {
      onsetDate: '2019-11-20',
      mainComplaint: '头晕、心悸',
      presentIllness: '近期血压升高明显',
      pastHistory: '高血压病史3年',
      allergyHistory: '对青霉素过敏',
      personalHistory: '吸烟20年',
      familyHistory: '父亲有高血压病史',
      auxiliaryExam: '心电图：窦性心律，血常规正常',
      treatmentAdvice: '1.控制血压 2.定期复查 3.清淡饮食',
      remarks: '建议戒烟'
    },
    prescriptions: [
      {
        name: '苯磺酸氨氯地平片',
        specification: '5mg',
        usage: '口服',
        dosage: '1片',
        frequency: '每日一次',
        days: 7,
        quantity: 7,
        unit: '片'
      },
      {
        name: '厄贝沙坦片',
        specification: '150mg',
        usage: '口服',
        dosage: '1片',
        frequency: '每日一次',
        days: 7,
        quantity: 7,
        unit: '片'
      },
      {
        name: '阿司匹林肠溶片',
        specification: '100mg',
        usage: '口服',
        dosage: '1片',
        frequency: '每日一次',
        days: 7,
        quantity: 7,
        unit: '片'
      }
    ]
  },
  {
    id: '201852639635',
    time: '2019-12-01 14:30:00',
    department: '内分泌科',
    doctor: '张医生',
    diagnosis: '2型糖尿病',
    physicalInfo: {
      temperature: '36.8',
      breathing: '18',
      pulse: '76',
      bloodPressure: '125-80',
      bloodSugar: '8.9',
      bloodFat: '6.2',
      height: '168',
      weight: '70'
    },
    medicalInfo: {
      onsetDate: '2019-11-30',
      mainComplaint: '多饮、多尿、乏力',
      presentIllness: '空腹血糖持续偏高',
      pastHistory: '无特殊病史',
      allergyHistory: '无',
      personalHistory: '嗜食甜食',
      familyHistory: '母亲有糖尿病史',
      auxiliaryExam: '空腹血糖8.9mmol/L，糖化血红蛋白6.8%',
      treatmentAdvice: '1.控制饮食 2.运动治疗 3.药物治疗',
      remarks: '建议每日监测血糖'
    },
    prescriptions: [
      {
        name: '盐酸二甲双胍片',
        specification: '0.5g',
        usage: '口服',
        dosage: '1片',
        frequency: '每日三次',
        days: 14,
        quantity: 42,
        unit: '片'
      },
      {
        name: '格列美脲片',
        specification: '2mg',
        usage: '口服',
        dosage: '1片',
        frequency: '每日一次',
        days: 14,
        quantity: 14,
        unit: '片'
      },
      {
        name: '阿卡波糖片',
        specification: '50mg',
        usage: '口服',
        dosage: '1片',
        frequency: '每日三次',
        days: 14,
        quantity: 42,
        unit: '片'
      }
    ]
  }
])

const selectedRecord = ref(null)

// 选择记录
const selectRecord = (record) => {
  selectedRecord.value = record
}

// 编辑病历
const editHistory = () => {
  // 实现编辑功能
}

// 打印病历
const printHistory = () => {
  // 实现打印功能
}
</script>

<style scoped>
.content-container {
  display: flex;
  gap: 20px;
  height: calc(100vh - 120px);
}

.left-panel {
  flex: 0 0 400px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow-y: auto;
}

.right-panel {
  flex: 1;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 20px;
  overflow-y: auto;
}

.visit-records {
  padding: 10px;
}

.record-item {
  padding: 15px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.3s;
}

.record-item:hover {
  background-color: #f5f7fa;
}

.record-item.active {
  border-color: #409eff;
  background-color: #ecf5ff;
}

.record-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.record-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.record-id {
  font-weight: bold;
  color: #303133;
}

.record-time {
  font-size: 12px;
  color: #909399;
}

.record-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #dcdfe6;
}

.record-dot.active {
  background-color: #409eff;
}

.record-content {
  font-size: 14px;
}

.record-row {
  margin-bottom: 5px;
}

.info-section {
  background-color: #fff;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
}

.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #dcdfe6;
}

.title-text {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.info-item {
  display: flex;
  align-items: center;
}

.medical-info {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.info-row {
  display: flex;
  gap: 10px;
}

.label {
  color: #606266;
  min-width: 80px;
}

.action-buttons {
  display: flex;
  gap: 10px;
}

.prescription-info {
  padding: 10px 0;
}

.prescription-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.prescription-item {
  padding: 15px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  background-color: #f8f9fa;
}

.prescription-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 10px;
}

.prescription-number {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #409eff;
  color: white;
  border-radius: 50%;
  font-size: 14px;
}

.prescription-name {
  font-weight: bold;
  color: #303133;
}

.prescription-spec {
  color: #909399;
  font-size: 13px;
}

.prescription-details {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  color: #606266;
  font-size: 14px;
}

.prescription-details span {
  min-width: 120px;
}
</style>
